<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>home</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    .wrapper {
      display: flex;
    }

    [v-cloak] {
      display: none;
    }

    .main {
      flex: 1;
      margin-right: 20px;
    }

    .pan1 {
      height: 264px;
    }

    .pan1 .xhead {
      height: 55px;
      line-height: 55px;
      padding: 0 20px;
      position: relative;
    }

    .pan1 .xhead .s_tit {
      font-size: 16px;
    }

    .pan1 .xhead .ck {
      padding: 0 20px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .check-btn {
      color: #0e9cf2;
      margin-right: 1px;
      font-size: 12px;
    }

    .mes a:hover,
    .check-btn:hover {
      color: #0f90e0;
    }

    .pan1 .iconfont.icort {
      color: #0e9cf2;
      font-size: 18px;
      display: inline-block;
      transform: translateY(2px);
    }

    .xs-top {
      display: flex;
      flex-direction: row;
    }

    .body-countet {
      display: flex;

    }

    .h-xl {
      width: 380px;
      height: 190px;
      margin: 0 20px;
      background: #f7f7f7;
      font-weight: normal;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .u-xl {
      flex: 1;
      height: 190px;
      margin: 0 20px 0 0;
      background: #fff;
    }

    .u-xl li {
      height: 30px;
      background: #eee;
      margin-bottom: 10px;
      line-height: 32px;
      padding: 0 15px;
      color: #666666;
      font-size: 12px;
    }

    .xs-bottom {
      display: flex;
      height: 264px;
      margin: 39px -20px 39px 0;
    }

    .bottom-left {
      flex: 1;
      background: #fff;
      margin-right: 20px;
    }

    .bottom-right {
      flex: 1;
      background: #fff;
      margin-right: 20px;
    }

    .left-data {
      flex: 1;
      width: 180px;
      height: 189px;
      background: #eee;
      margin: 0 20px;
    }

    .right-data {
      flex: 1;
      height: 189px;
      background: #eee;
      margin-right: 20px;
    }

    .side-r {
      width: 320px;
    }

    .side1 .d1 {
      display: flex;
    }

    .d1 #h-avator {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .d1 .dx {
      flex: 1;
    }

    .d1 .dx .acc {
      margin-bottom: 8px;
    }

    .d1 .dx a {
      color: #0e9cf2;
      font-size: 12px;
    }

    .d1.d1a {
      padding: 25px 20px;
      border-bottom: 1px solid #e9e9e9;
    }

    .d1.d1b {
      line-height: 30px;
      padding: 25px 20px;
    }

    .d1b .buyhash-btn {
      display: block;
      padding: 0 8px;
      height: 30px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      background: #0e9cf2;
      border-radius: 2px;
    }

    .d1b .buyhash-btn:hover {
      opacity: 0.9;
    }

    .d1b .yue {
      margin-right: 10px;
      flex: 1;
    }

    .side2,
    .side3 {
      padding: 20px;
    }

    .mes {
      position: relative;
      font-size: 16px;
      color: #333;
    }

    .mes a {
      color: #0e9cf2;
      font-size: 12px;
      position: absolute;
      right: 0;
      top: 3px;
    }

    .mes a.on {
      right: 20px;
    }

    .m_more a.on::before {
      content: attr(data-count);
      display: block;
      width: 22px;
      height: 22px;
      line-height: 22px;
      font-size: 12px;
      font-family: Arial;
      border-radius: 55%;
      color: #fff;
      border: 1px solid #fff;
      background: #ff3756;
      text-align: center;
      position: absolute;
      top: -3px;
      right: -25px;
    }

    .ins {
      display: flex;
      border-bottom: 1px solid #e9e9e9;
      padding: 15px 0;
    }

    .ins:last-child {
      border-bottom: none;
    }

    .ins .ina {
      width: 46px;
      height: 46px;
      background: #eee;
      padding: 6px 0 5px 0;
      margin-top: 3px;
    }

    .ins .ina p {
      font-size: 12px;
      color: #999;
      text-align: center;
    }

    .ins .inb {
      flex: 1;
      color: #454545;
      padding: 5px 10px 2px 10px;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .ins:hover .inb {
      color: #49a9ee;
    }

    .side3 .imsq {
      width: 100%;
    }

    .iconfont.iconrt {
      color: #0e9cf2;
      font-size: 14px;
      vertical-align: -1px;
    }

    .left-count {
      display: flex;
      flex-direction: row;
      height: 189px;
    }

    .count-left {
      height: 189px;
      width: 180px;
      background: #eee;
      margin: 0 20px;
    }

    .count-right {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 189px;
      background: #fff;
      margin: 0 20px 0 0;
      width: 0;
    }

    .right-count {
      flex: 1;
      background: #eee;
      margin: 0 20px;
    }

    .ai-data {
      flex: 1;
      height: 82px;
      background: #eee;
      margin-bottom: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .modal-data {
      flex: 1;
      height: 82px;
      background: #eee;
    }

    .h-xl p {
      text-align: center;
      color: #666;
    }

    .count-right p {
      text-align: left;
      line-height: 86px;
      color: #666;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 20px;
    }

    .count-left p,
    .count-left p,
    .right-count p {
      text-align: center;
      color: #666;
    }

    .count-left,
    .right-count {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .p {
      text-align: center;
      height: 20px;
      line-height: 20px;
      margin-bottom: 2px;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="home">
    <div class="main">
      <section class="panel pan1">
        <div class="xhead">
          <span class="s_tit">AI训练</span>
          <p class="ck">
            <a class="check-btn" href="javascript:;" @click="G.to('ai_training')">查看详情 <i class="iconfont iconrt icon-right"></i></a>
          </p>
        </div>
        <div class="xs-top">
          <div class="h-xl">
            <p>{{ai.taskCount}}</p>
            <p>任务总数</p>
          </div>
          <div class="u-xl">
            <ul>
              <li>准备中 {{ai.inPreparationNum}}</li>
              <li>队列中 {{ai.inAlignment}}</li>
              <li>训练中 {{ai.inDrillNum}}</li>
              <li>已终止 {{ai.terminated}}</li>
              <li>已完成 {{ai.done}}</li>
            </ul>
          </div>
        </div>
        <div class="xs-bottom">
          <div class="bottom-left">
            <div class="xhead">
              <span class="s_tit">数据管理</span>
              <p class="ck">
                <a class="check-btn" href="javascript:;" @click="G.to('dataManage')">查看详情 <i class="iconfont iconrt icon-right"></i></a>
              </p>
            </div>
            <div class="left-count">
              <div class="count-left">
                <p class="p">{{G.getfGMK(recount)}}/10.00G</p>
                <p class="p">存储空间</p>
              </div>
              <div class="count-right">
                <div class="ai-data">
                  <p>AI模型: {{G.getfGMK(almodal)}}</p>
                </div>
                <div class="modal-data">
                  <p>数据集: {{G.getfGMK(alshuju)}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom-right">
            <div class="xhead">
              <span class="s_tit">模型管理</span>
              <p class="ck">
                <a class="check-btn" href="javascript:;" @click="G.to('modelManage')">查看详情 <i class="iconfont iconrt icon-right"></i></a>
              </p>
            </div>
            <div class="left-count">
              <!-- <div class="count-left">
                <p class="p">100</p>
                <p class="p">模型总数</p>
              </div> -->
              <div class="right-count">
                <p class="p">{{modalcount}}</p>
                <p class="p">模型总数</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="side-r">
      <section class="panel side1 mb20">
        <div class="d1 d1a">
          <img id="h-avator" :src="avator" alt="">
          <div class="dx">
            <p class="acc texto">{{account}}</p>
            <a class="reset-btn" href="javascript:;" @click="G.vm.resetPwd">重置密码</a>
          </div>
        </div>
        <div class="d1 d1b">
          <p class="yue texto">账户余额 : {{getFormatAccountBalance}} TH</p>
          <a class="buyhash-btn texto" href="javascript:;" @click="G.to('buyHash')">购买算力</a>
        </div>
      </section>
      <section class="panel side2 mb20" v-if="noticeList.length">
        <div class="mes m_more mb10">
          最新公告
          <a :class="{on: noticeCount > 3}" href="javascript:;" :data-count="notCount" @click="G.to('notice')">更多信息 <i
              class="iconfont iconrt icon-right"></i></a>
        </div>
        <a class="ins" v-for="(item, index) of noticeList" :key="index" @click="G.to('notice_detail' + '&' + item.id)">
          <div class="ina">
            <p>{{getMonthAndDays[index]}}</p>
            <p>{{getYears[index]}}</p>
          </div>
          <div class="inb">{{item.title}}</div>
        </a>
      </section>
      <section class="panel side3">
        <div class="mes mb10">
          社区问答
          <a href="http://bbs.tesra.io/" target="_blank">加入社区 <i class="iconfont iconrt icon-right"></i></a>

        </div>
        <p class="mb10">有疑问? 社区达人帮你解决!</p>
        <img class="imsq" src="images/shequ1.png" alt="">
      </section>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        noticeCount: 3,
        avator: 'images/lo1.png',
        account: '获取中..',
        accountBalance: 0,
        noticeList: [],
        almodal: '0',
        alshuju: '0',
        modalcount: '0',
        recount: '0',
        ai: {
          taskCount: 0,
          inPreparationNum: 0,
          inAlignment: 0,
          inDrillNum: 0,
          terminated: 0,
          done: 0,
        },
        dataManage: {
          totalStoreSize: 0,
          currentStoreSize: 0,
          AImodel: 0,
          dataSet: 0,
        },
        modelManage: {
          modelTotal: 0,
          Accuracy: 0,
        },
      },
      methods: {
        init() {
          this.requestList()
          this.requestUserData()
          this.requestAIdata()
          this.requestData()
          this.requestMadal()
          this.reMadal()
          this.requestCount()
        },
        // 提交数据
        requestList() {
          var realUrl = '/user/findnoticeRetlist';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {
            currentPage: 1,
            pageSize: 3
          }
          var data = G.paramsSerializer(ydata)
          // 立即提交
          axios.post(url, data, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                this.noticeList = res.data.data.listModel;
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        // 获取用户数据
        requestUserData() {
          var realUrl = '/user/finduser';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          // 立即提交
          axios.post(url, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                this.account = res.data.data.username;
                this.accountBalance = res.data.data.points;
              } else {
                almodal = res.data.message;
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

        // 获取AI训练数据
        requestAIdata() {
          var realUrl = '/user/trainingRecord';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {}
          var data = G.paramsSerializer(ydata)
          // 立即提交
          axios.post(url, data, {
              withCredentials: true,
            }).then(res => {

              if (res.data.code == 1) {
                var map = res.data.data
                this.ai = {
                  taskCount: map.getready + map.queue + map.train + map.ingstop + map.daiStaus,
                  inPreparationNum: map.getready,
                  inAlignment: map.queue,
                  inDrillNum: map.train,
                  terminated: map.ingstop,
                  done: map.daiStaus,
                }
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

        // 获取公告数据
        requestNotice() {
          var realUrl = '';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/xp' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl
          var ydata = {}
          var data = G.paramsSerializer(ydata)
          // 立即提交
          axios.post(url, data, {
              withCredentials: true,
            }).then(res => {
              console.log('aaa', res)
              if (res.data.code == 1) {
                this.ai = {
                  taskCount: 10,
                  inPreparationNum: 5,
                  inAlignment: 3,
                  inDrillNum: 12,
                  terminated: 6,
                  done: 4,
                }
              } else {
                console.log(res.data.message);
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
        requestData() {
          axios.get('/dataManager/getUseSpace', {
              params: {
                dataType: 2,
              }
            })
            .then(res => {
              this.almodal = res.data.data.space * 1024
            })
            .catch(err => {
              console.log(err)
            });
        },
        requestMadal() {
          axios.get('/dataManager/getUseSpace', {
              params: {
                dataType: 1,
              }
            })
            .then(res => {
              this.alshuju = res.data.data.space * 1024
            })
            .catch(err => {
              console.log(err)
            });

        },
        requestCount() {
          axios.get('/dataManager/getUseSpace')
            .then(res => {
              this.recount = res.data.data.space * 1024
            })
            .catch(err => {
              console.log(err)
            });

        },
        reMadal() {
          axios.get('/modelManagement/numberModel')
            .then(res => {
              if (res.data.code == 1) {
                this.modalcount = res.data.number
              }
            })
            .catch(err => {
              console.log(err)
            });
        },
      },
      computed: {
        notCount() {
          return this.noticeCount > 99 ? '99+' : this.noticeCount
        },
        // 账户余额
        getFormatAccountBalance() {
          return G.toThousands(G.roundFixed(this.accountBalance))
        },
        getYears() {
          return this.noticeList.map(cur => {
            return G.getFormatYMD(cur.createTime).slice(0, 4)
          })
        },
        getMonthAndDays() {
          return this.noticeList.map(cur => {
            return G.getFormatYMD(cur.createTime).replace(/^\d{4}\-(.+)$/, '$1')
          })
        },
      },
      mounted() {
        this.init()
      }
    })
  </script>
</body>

</html>